<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function cardValidate(){
	var digitpattern=/^\d{4}$/;
	var status = true;
	if (document.card.first.value.search(digitpattern)==-1)
		status = false;
	if (document.card.second.value.search(digitpattern)==-1)
		status = false;
	if (document.card.third.value.search(digitpattern)==-1)
		status = false;
	if (document.card.fourth.value.search(digitpattern)==-1)
		status = false;
	
	if(status == false){
			document.all("error").innerHTML  = "Please enter a valid 16 digit number";
			return false;
	}
	else{
			return true;
		}	
}
</script>

</head>
<body>
<form name ="card" method="post" action="PaymentServlet" onsubmit="return cardValidate();">
	
	<div class ="inputColumn" id = "createAccount"  
			style="text-align: center; border: thin; margin: auto;">
			
			<h3><font size=3 color="black">Please enter your 16 digit Credit Card Number</font></h3>
			<label id="error" style="size: 25; color: red"></label>	
			<% String status = (String)request.getAttribute("ServerMessage");
			if(status != null){
			%>
			<label style="size: 25; color: red"><%=status%></label>	<%} %>	
		<table cellpadding=2 cellspacing=1 border="0" width="600">
			
			<tr>
			<td valign=top align="center" style=""> 
			<label style="size: 32; color: black">Select Card Type:</label>
				<select name="choice" size=1 >
				  <option selected value="1">Master</option>
				  <option value="2">Visa</option>
				</select>
				<label style="size: 5; color: black"></label>
				<input type="text" name="first" value="" size=4 maxlength=4 style="background-color:#eeeeee">
				<label style="size: 32; color: red">-</label>
				<input type="text" name="second" value="" size=4 maxlength=4 style="background-color:#eeeeee">
				<label style="size: 32; color: red">-</label>	
				<input type="text" name="third" value="" size=4 maxlength=4 style="background-color:#eeeeee">
				<label style="size: 32; color: red">-</label>
				<input type="text" name="fourth" value="" size=4 maxlength=4 style="background-color:#eeeeee">
					
			</td>
			
			</tr>
			</table><br><br>
			<table>
			<tr>
				<td  align="center" colspan=2>
				<input type="submit" value="Make Payment" name ="submit"> 
			</td>
			<td  align="center" colspan=2>
				<input type="button" value="Cancel" onclick="document.location.href='cartDetails.jsp'">
			</td>
			</tr>
		</table>
	</div>
	</form>

</body>
</html>